<!DOCTYPE html>
<html>
<head>
	<title>时钟</title>
	<meta charset="UTF-8">
	<style>
		.clock{
			width: 200px;
			height: 200px;
			margin:100px auto;
			border:10px solid #000;
			border-radius: 50%;
			position: relative;
		}
		.line1,.line2,.line3,.line4,.line5,.line6{
			position: absolute;
			left: 50%;
			width: 4px;
			margin-left: -2px;
			height: 200px;
			background: #ccc;
		}
		.line1,.line4{
			width: 6px;
			margin-left: -3px;
			background: #aaa;
		}
		.line2{
			transform: rotate(30deg);
		}
		.line3{
			transform: rotate(60deg);
		}
		.line4{
			transform: rotate(90deg);
		}
		.line5{
			transform: rotate(-30deg);
		}
		.line6{
			transform: rotate(-60deg);
		}
		.dotted{
			width: 20px;
			height: 20px;
			background: #000;
			border-radius: 50%;
			position: absolute;
			left: 50%;
			top: 50%;
			margin:-10px 0 0 -10px;
		}
		.cover{
			width: 160px;
			height: 160px;
			border-radius: 50%;
			position: absolute;
			background: #fff;
			margin:-80px 0 0 -80px;
			left: 50%;
			top: 50%;
		}
		.hour{
			width: 6px;
			height: 50px;
			background: #000;
			position: absolute;
			top: 50%;
			left: 50%;
			margin:-50px 0 0 -3px;
			z-index: 2;
			transform-origin: bottom center;
			animation: rotate 43200s steps(60) infinite;
		}
		.minute{
			width: 4px;
			height: 60px;
			position: absolute;
			background: #000;
			top: 50%;
			left: 50%;
			margin:-60px 0 0 -2px;
			z-index: 2;
			transform-origin: bottom center;
			animation: rotate 3600s steps(60) infinite;

		}
		.seconds{
			width: 2px;
			height: 70px;
			background:red;
			position: absolute;
			top: 50%;
			left: 50%;
			margin:-70px 0 0 -1px;
			z-index: 2;
			transform-origin: bottom center; /*设置旋转元素的基点位置*/
			animation: rotate 60s steps(60) infinite;
		}
		@keyframes rotate{
			from{
				transform: rotate(0deg)
			}
			to{
				transform: rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="clock">
		<div class="line1"></div>
		<div class="line2"></div>
		<div class="line3"></div>
		<div class="line4"></div>
		<div class="line5"></div>
		<div class="line6"></div>
		<div class="cover"></div>
		<div class="dotted"></div>
		<div class="hour"></div>
		<div class="minute"></div>
		<div class="seconds"></div>
	</div>
</body>
</html>